<template>
<h1>采购入库</h1>
  <el-row>
    <el-col :span="10">
      <span>供应商</span>
      <el-select v-model="providerName">
        <el-option
            v-for="item in selectOptionsAll"
            :key="item.providerId"
            :label="item.providerName"
            :value="item.providerName">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="14">
      <span>采购人 &nbsp;&nbsp;</span>
      {{buyName}}
    </el-col>
  </el-row>
<span>
  采购物品
</span>
<el-table :data="buyCartList" stripe>
  <el-table-column prop="goodsName" label="商品名称"></el-table-column>
  <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
  <el-table-column prop="buyPrice" label="采购价">
    <template #default="scope">
      <el-input-number @change="updateBuyCart(scope.row)" v-model="scope.row.buyPrice"></el-input-number>
    </template>
  </el-table-column>
  <el-table-column prop="buyNo" label="采购数量">
    <template #default="scope">
      <el-input-number min="1" @change="updateBuyCart(scope.row)" v-model="scope.row.buyNo"></el-input-number>
    </template>
  </el-table-column>
  <el-table-column label="移除商品">
    <template #default="scope">
      <el-button type="danger" @click="remove(scope.row.buycartId)">移除商品</el-button>
    </template>
  </el-table-column>
<!--  <el-table-column prop="goodsNo"></el-table-column>-->
</el-table>

<el-button type="primary" @click="addDialog">添加商品</el-button>
<el-button type="primary" @click="ruku">入库</el-button>

  <el-dialog v-model="dialogVisible" title="添加采购商品" width="30%">
    <el-form :model="goodsForm" ref="goodsForm" :rules="rules">
      <el-form-item label="商品编号" prop="goodsNo">
          <el-input v-model="goodsForm.goodsNo" @blur="findGoodsByGoodsNo(goodsForm.goodsNo)"></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="goodsForm.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="品牌" prop="goodsBrand">
        <el-input v-model="goodsForm.goodsBrand"></el-input>
      </el-form-item>
      <el-form-item label="类别" prop="goodsType">
        <el-select v-model="goodsType" placeholder="请选择类别">
          <el-option label="电脑产品" value="1"></el-option>
          <el-option label="安防产品" value="2"></el-option>
          <el-option label="办公耗材" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购数量">
        <el-input-number :min="1" v-model="caigouNo"></el-input-number>
      </el-form-item>
      <el-form-item prop="goodsImg">
        <el-avatar
            :src="'/api/face/'+this.goodsImg"
        />
        <el-upload action="/api/goods/uploadGoodsImg"
        name="goodsImg"
        :limit="1"
        accept="image/jpeg,image/jpg,image/png"
        :on-success="uploadSuccess">

        <el-button slot="trigger"
                   size="small"
                   type="primary"
        >选择商品图片
        </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addGoods">添加</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
      axios.post("/api/provider/findAllProviders",null).then(response=>{
        this.selectOptionsAll = response.data;
        this.providerName = this.selectOptionsAll[0].providerName
      });
      this.reload();
      this.buyName = localStorage.getItem("userName");
  },
  name: "Caigou",
  data(){
    return{
      providerName:'',
      selectOptionsAll:[],
      buyName:'',
      buyCartList:[],
      caigouNo:0,
      dialogVisible:false,
      goodsForm:{},
      goodsImg:'',
      goodsType:"1",
      rules:{
        goodsNo:[{required:true,message:'请输入商品编号',trigger:'blur'}],
        goodsName:[{required:true,message:'请输入商品名称',trigger:'blur'}],
        goodsBrand:[{required:true,message:'请输入品牌',trigger:'blur'}]
      }
    }
  },
  methods:{
    findGoodsByGoodsNo(goodsNo){
      let param = new URLSearchParams();
      param.append("goodsNo",goodsNo);
      axios.post("/api/goods/findGoodsByGoodsNo",param).then(response=>{
        if (response.data!=null && response.data!=''){
          this.goodsForm = response.data;
          this.goodsImg = response.data.goodsImg;
          this.goodsType = response.data.goodsType.toString();
        }
      })
    },
    updateBuyCart(buyCart){
      axios.post("/api/buyCart/modifyBuyCart",buyCart).then(response=>{
         if (response.data=='success'){
            this.reload();
         }
      })
    },
    remove(buyCartId){
      let param=new URLSearchParams();
      param.append("buyCartId",buyCartId);
      axios.post("/api/buyCart/removeBuyCart",param).then(response=>{
        if (response.data=='success'){
             this.reload();
        }
      })
    },
    addDialog(){
      this.goodsForm = {};
      this.goodsImg = '';
      this.goodsType = "1"
      this.dialogVisible = true;
    },
    uploadSuccess(res){
      this.goodsImg = res
    },
    addGoods(){
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          this.goodsForm.goodsType=this.goodsType;
          this.goodsForm.goodsImg=this.goodsImg;
          let param = new URLSearchParams();
          param.append("goodsNo",this.goodsForm.goodsNo);
          param.append("goodsName",this.goodsForm.goodsName);
          param.append("goodsBrand",this.goodsForm.goodsBrand);
          param.append("goodsType",this.goodsForm.goodsType);
          param.append("goodsImg",this.goodsForm.goodsImg);
          param.append("inventoryNo","0");
          param.append("buyNo",this.caigouNo)
          axios.post("/api/buyCart/addIntoCart",param).then(response=>{
            if (response.data=='success'){
              this.reload();
              this.dialogVisible=false;
            }
          })
        }else {
          ElMessage.error("请输入正确的数据")
        }
      });

    },
    ruku(){
      let p ={"providerName":this.providerName,
               "buyName":this.buyName
               }
      axios.post("/api/goods/storage",p).then(response=>{
        if (response.data=='success'){
          ElMessage.success("入库成功");
          this.reload()
        }
      })
    },
    reload(){
      axios.post("/api/buyCart/findBuyCarts",null).then(response=>{
        this.buyCartList = response.data;
      })
    }
  }
}
</script>

<style>

</style>